import * as THREE from 'three'

// 创建一个三维场景
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(80, 80, 80);
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000, // 设置材质颜色
  transparent: true, // 开启透明度
  opacity: 0.5 // 透明程度
})

// 创建网格模型
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);

// 创建一个三位坐标轴
const axesHelper = new THREE.AxesHelper(150);
// 坐标轴添加到场景中
scene.add(axesHelper);

const width = 800;
const height = 500;

// 创建一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 3000);
// 设置相机的位置
camera.position.set(200, 200, 200)
// 相机的视线 观察目标点坐标
// camera.lookAt(0, 0, 0) //坐标原点
// camera.lookAt(0, 10, 0) //y轴上的某点
camera.lookAt(mesh.position); //指向网格模型

// 创建一个webGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); // canvas画布宽高
renderer.render(scene, camera); // 执行一个渲染操作，类比相机的拍照。

// 把渲染结果canvas画布添加到页面上。
document.body.appendChild(renderer.domElement);
// document.getElementById('webgl-box').appendChild(renderer.domElement);



